<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  单例就是保证一个类只有一个实例，实现方法一般是先判断实例存在与否，如果存在直接返回，如果不存在就创建了再返回，这就确保了一个类只有一个实例对象。在JavaScript里，单例作为一个命名空间提供者，从全局命名空间里提供一个唯一的访问点来访问该对象

  单例的常见作用：

模块间通信
系统中某个类的对象只能存在一个
保护自己的属性和方法
  <button id="button">登录</button>
  <script>
    // var createLogin = function () {
    //   var div
    //   return function () {
    //     if (!div) { // 实现单例
    //       div = document.createElement('div')
    //       div.innerHTML = '我是登录弹窗'
    //       div.style.display = 'none'
    //       document.body.appendChild(div)
    //     }
    //     return div
    //   }
    // }
    // var create = createLogin()
    // document.getElementById('button').onclick = function () {
    //   var login = create()
    //   login.style.display = 'block'
    // }

    // 抽取核心代码
    var createLogin = function () {
      var div = document.createElement('div')
      div.innerHTML = '我是登录弹窗'
      div.style.display = 'none'
      document.body.appendChild(div)
      return div
    }
    function getSingle (fn) {
      var result
      return function () {
        return result || (result = fn.apply(this, arguments)) // 短路表达式
      }
    }
    var create = getSingle(createLogin)
    document.getElementById('button').onclick = function () {
      var login = create()
      login.style.display = 'block'
    }
  </script>
</body>
</html>